import {Component, Input, OnChanges, OnInit} from '@angular/core';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import {UtilComponent} from '../../interface/util-component.interface';
import {Map} from 'ol';

@Component({
    selector: 'kylin-online-tile',
    templateUrl: './online-tile.component.html',
    styleUrls: ['./online-tile.component.less']
})
export class OnlineTileComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;

    @Input() set data(val) {
        Object.assign(this, val);
    };

    // ---------- 接口实现 end ---------------- //

    xyzUrl = null;
    layers = [];

    constructor() {
    }

    ngOnInit() {
    }

    addLayer() {
        const tileLayer = new TileLayer({
            source: new XYZ({
                url: this.xyzUrl
            })
        });
        this.layers.push(tileLayer);
        this.map.addLayer(tileLayer);
    }

    cancel(options?: any): any {
        this.layers.map(item => {
            this.map.removeLayer(item);
        });
    }
}
